<template>
  <div class="maskCenter">
    <MyFormDetail v-if="showForm" @hideForm="hideForm"></MyFormDetail>
    <!-- titleName表示文档所属模块名称，fileType表示附件所属类别 ，isBrowse表示是否是浏览状态-->
    <manage
      v-if="showManage"
      @hide="hideManage"
      :titleName="titleName"
      :fileType="fileType"
      :isBrowse="false"
    />
    <!-- <rules-manage v-if="editFlag" :isBrowse="isBrowse" @hide="hide" @query='search' :id="id" :titleName="titleName" :dictionaryId="dictionaryId"></rules-manage> -->
    <div :class="windowShow ? 'systemDialog' : 'systemDialog-hide'">
      <div class="dialog-header" v-winmove>
        <span>编辑报表</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="关闭"
          placement="top-start"
        >
          <span
            class="icon iconfont iconbiaoqianlan-guanbi"
            @click="close"
          ></span>
        </el-tooltip>
      </div>
      <div class="dialog-body content">
        <div class="forms-list">
          <div class="definition-name">{{ form.name }}</div>
          <pageMenu
            :menuitems="menuitems"
            @itemclick="itemclick"
            @itemIconClick="itemIconClick"
            @dropitemclick="dropitemclick"
            :dropmenus="dropmenus"
            style="
              height: calc(100% - 48px);
              width: 100% !important;
              padding: 0px;
            "
            @add="add"
            :icon="'iconfont iconbiaoge-shanchu'"
          ></pageMenu>
        </div>
        <div class="attribute">
          <div class="title">
            <span>属性</span>
          </div>
          <el-form
            class="systemForm"
            ref="form"
            :model="form"
            label-width="75px"
            size="mini"
          >
            <el-form-item label="名称:">
              <el-input
                v-model="form.name"
                placeholder="请输入报表名称"
                style="width: 147px"
                class="systemInput"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型:">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                style="width: 147px"
                class="systemInput"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="执行时间:">
              <el-input
                v-model="form.date"
                style="width: 147px"
                class="systemInput"
              ></el-input>
            </el-form-item>
            <el-form-item label="频率:">
              <el-input
                v-model="form.frequency"
                style="width: 147px"
                @focus="showManage1"
                class="systemInput"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="close">确认</span>
        <span class="systemButtonConfirm" @click="close">取消</span>
      </div>
    </div>
  </div>
</template>


<script>
import winmove from "@/directives/winmove";
import pageMenu from "../pageMenu.vue";
import MyFormDetail from "../definition/formDetail.vue";
import manage from "../attachment/manage.vue";
export default {
  name: "definitionDetail",
  directives: {
    winmove,
  },
  components: {
    pageMenu,
    MyFormDetail,
    manage,
  },
  props: {},
  data() {
    return {
      fileType: "承包合同附件",
      titleName: "附件列表",
      showManage: false,
      dropmenus: [],
      typeOptions: [
        {
          value: 0,
          label: "提前提醒",
        },
        {
          value: 1,
          label: "推后提醒",
        },
      ],
      windowShow: true,
      showForm: false,
      menuitems: [
        {
          name: "报表1",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
        {
          name: "报表2",
        },
      ],
      form: {
        id: "",
        name: "",
        type: "",
        date: "",
        frequency: "",
      },
    };
  },
  methods: {
    showManage1() {
      this.showManage = true;
    },
    itemclick(e, index) {
      this.showForm = true;
    },
    itemIconClick(e, index) {
      this.del(index);
    },
    dropitemclick(e, index) {},
    handleSelect(key, keyPath) {},
    add() {
      //   if (!this.form.id) {
      //     this.message("请先保存报表属性的新增！", 3);
      //     return;
      //   }
      this.showForm = true;
    },
    del(id) {
      console.log(id);
    },
    close() {
      this.windowShow = false;
      setTimeout(() => {
        this.$emit("hide");
      }, 400);
    },
    hideForm: function () {
      this.showForm = false;
    },
    hideManage: function () {
      this.showManage = false;
    },
  },
  created: function () {},
  mounted: function () {
    //			this.rendcom = () => import('../cellcontrols/'+this.com.comname+'.vue')
    //			console.log(this.comstyle);
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: row;
}
.content /deep/ .page-menu {
  background: var(--system-page-content-bgc);
  width: 100%;
  border: none;
  padding-top: 0px;
}
.title {
  width: 32px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-form-text-color);
  margin-left: 0px;
  margin-bottom: 16px;
  line-height: 16px;
}

.attribute {
  width: 50%;
  margin-left: 12px;
  background: var(--dialog-buttonBox-back-color);
  border: 1px solid var(--div-border-color);
  border-radius: 6px;
  padding: 16px;
}
.forms-list {
  background: rgba(255, 255, 255, 0);
  border: 1px solid var(--div-border-color);
  border-radius: 6px;
}
.definition-name {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-form-text-color);
  margin: 16px;
  text-align: left;
}

.definition-name .myForm .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
  border: 1px solid var(--input-border-color);
  box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.1),
    0px -10px 20px 0px rgba(204, 204, 204, 0.1);
  border-radius: 4px;
}
.systemDialog {
  width: 540px;
  height: 584px;
}
.systemDialog-hide {
  width: 540px;
  height: 584px;
}
.page-menu .page-menu-search .addicon {
  text-align: center;
}
</style>
<style>
</style>
